<template>
    <!-- 经办合同 -->
    <div>
        <div class="ffffff mainpadding">
            <el-row :gutter="10">
                <el-col :span="22">
                    <el-tabs v-model="params.tableNum" @tab-click="handleClick">
                        <el-tab-pane label="我收到的" name="1"></el-tab-pane>
                        <el-tab-pane label="我发起的" name="2"></el-tab-pane>
                        <el-tab-pane label="抄送我的" name="3"></el-tab-pane>
                        <el-tab-pane label="草稿" name="4"></el-tab-pane>
                        <el-tab-pane label="待我操作" name="5"></el-tab-pane>
                        <el-tab-pane label="待他人操作" name="6"></el-tab-pane>
                        <el-tab-pane label="已完成" name="7"></el-tab-pane>
                        <!-- <el-tab-pane label="批量合同" name="8"></el-tab-pane> -->
                    </el-tabs>
                </el-col>
                <el-col :span="2">
                    <el-popover placement="top-start" width="150" trigger="hover">
                        <li class="caozuoitem" @click="direct">直接发起</li>
                        <!-- <li class="caozuoitem">使用模板发起</li> -->
                        <el-button slot="reference" size="small" type="primary">发起签署<i
                                class="el-icon-arrow-down"></i></el-button>
                    </el-popover>
                </el-col>
            </el-row>
            <!-- 筛选 -->
            <el-form ref="form" :model="params" label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-form-item label="合同名称">
                            <el-input size="small" v-model="params.signName" placeholder="请输入合同名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="合同编号">
                            <el-input size="small" v-model="params.signNumber" placeholder="请输入合同编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <div class="zdystyle">
                            <el-form-item>
                                <el-input placeholder="请输入名称" size="small" v-model="params.nameSearchValue"
                                    class="input-with-select">
                                    <el-select v-model="params.nameSearchType" slot="prepend" placeholder="请选择">
                                        <el-option label="按个人查找" value="1"></el-option>
                                        <el-option label="按企业查找" value="2"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div style="margin-top:5px"></div>
                        <el-button size="small" type="primary" @click="getList">搜索</el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                        <el-button size="small" @click="seledown = seledown ? 0 : 1">
                            <i class="el-icon-arrow-down" v-show="seledown == 0"></i>
                            <i class="el-icon-arrow-up" v-show="seledown == 1"></i>
                        </el-button>
                    </el-col>
                </el-row>
                <template v-if="seledown == 1">
                    <el-row :gutter="10">
                        <el-col>
                            <el-form-item label="签署状态">
                                <li class="pointer itemlable" :class="params.signState == item.value ? 'focus' : ''"
                                    v-for="item in arr" :key="item.value" @click="params.signState = item.value">{{
                                        item.name }}</li>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="10">
                            <el-form-item label="合同时间">
                                <el-select v-model="params.timeSearchType" placeholder="请选择">
                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
            </el-form>
        </div>
        <div class="contentTable ffffff ">
            <div class="padding15All tableMain">
                <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%"
                    :header-cell-style="tableHeaderColor" :empty-text='emtypetxt'>
                    <el-table-column label="合同名称">
                        <template slot-scope="scope">
                            <div class="tabtext pointer" @click="handleEdit(scope.row)">{{ scope.row.signName }}</div>
                            <!-- <div class="tabtext hui">{{ scope.row.signName }}</div> -->
                        </template>
                    </el-table-column>
                    <el-table-column label="合同编号">
                        <template slot-scope="scope">
                            <div class="tabtext inline pointer">{{ scope.row.contractNum }}</div>
                            <!-- <i class="el-icon-document-copy pointer"></i> -->
                        </template>
                    </el-table-column>
                    <el-table-column label="时间">
                        <template slot-scope="scope">
                            <div class="tabtext flexleft">
                                <span class="margin-right1">始</span>
                                <span class="hui">{{ scope.row.insertTime }}</span>
                            </div>
                            <div class="tabtext flexleft" v-if="scope.row.signEndTime">
                                <span class="margin-right1">终</span>
                                <span class="hui">{{ scope.row.signEndTime }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="joinPersonList" label="参与人">
                        <template slot-scope="scope">
                            <el-tooltip placement="top">
                                <div slot="content" style="line-height: 24px;font-size: 14px;" v-for="item in scope.row.joinPersonList" :key="item.userId">
                                {{ item.enterpriseName }}({{ item.userName }})</div>
                                <!-- <div slot="content">多行信息<br />第二行信息</div> -->
                                <div class="tabtext" >
                                    <el-button type="text" style="color: #333 !important;" v-for="(item,index) in scope.row.joinPersonList" :key="item.userId">
                                        <span v-show="index == 0 || index == 1" >{{ item.enterpriseName }}({{ item.userName }})</span>
                                    </el-button></div>
                                
                            </el-tooltip>
                            <!-- <div class="tabtext" v-for="item in scope.row.joinPersonList" :key="item.userId">
                                {{ item.enterpriseName }}({{ item.userName }})</div> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="signStateTxt" label="状态"></el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-popover placement="bottom-end" width="100" trigger="hover">
                                <li class="caozuoitem pointer" @click="handleEdit(scope.row)">查看</li>
                                <!-- <li class="caozuoitem">分享</li> -->
                                <li class="caozuoitem" v-if="scope.row.signState == 6">重新发起</li>
                                <el-button slot="reference" size="small" type="primary"
                                    @click="handleEdit(scope.row)">{{ scope.row.signState == 0 ? '签署' : '查看' }}<i
                                        class="el-icon-arrow-down"></i></el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flexleft padding15" style="justify-content: flex-end;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="params.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize"
                    layout="total, prev, pager, next, sizes, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import { handlingSigningList } from '@/api/handlecontract'
export default {
    data() {
        return {
            params: {
                signName: "",
                signNumber: "",
                nameSearchType: "1",//1-按人名搜索 2-按企业搜索
                nameSearchValue: "",
                signState: "",
                tableNum: "1",//1 - 我收到的 2 - 我发起的 3 - 抄送我的 4 - 草稿 5 - 待我操作 6 - 待他人操作 7 - 已完成
                timeSearchEnd: "",
                timeSearchStart: "",
                timeSearchType: "1",//1-按发起时间筛选 2-按完成时间筛选 3-按签订时间筛选时间
                pageNo: 1,
                pageSize: 10
            },
            option1: [{
                label: "按个人查找",
                value: "1",
            },
            {
                label: "按企业查找",
                value: "2",
            },],
            options2: [
                {
                    label: "按发起时间筛选",
                    value: "1",
                },

                {
                    label: "按完成时间筛选",
                    value: "2",
                },
                {
                    label: "按签订截止日期",
                    value: "3",
                }
            ],
            seledown: 0,//筛选是否全部展示
            value2: [],//开始时间-结束时间
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 表格数据
            emtypetxt: '',
            list: [],
            total: 0,
            multipleSelection: [],
            arr: [
                { value: "", name: "全部" },
                { value: "0", name: "签署中" },
                { value: "1", name: "签署完成" },
                { value: "2", name: "拒绝签署" },
                { value: "3", name: "解除中" },
                { value: "4", name: "解除完成" },
                { value: "5", name: "拒绝解除" },
                { value: "6", name: "已撤回" },
                { value: "7", name: "已过期" },
            ],
        }
    },
    mounted() {
        this.getList()
    },
    watch: {
        value2(newval) {
            this.form1.launchTimeEnd = Number(this.value2[1])
            this.form1.launchTimeStart = Number(this.value2[0])
            this.form1.signTimeEnd = Number(this.value2[1])
            this.form1.signTimeStart = Number(this.value2[0])
            this.form1.signTimeStart = Number(this.value2[0])
        }
    },
    methods: {
        handleEdit(row) {
            console.log(row, "合同信息");
            this.$router.push({ path: "/SignDocument", query: { id: row.signId } }, () => { })
        },
        getList() {
            this.emtypetxt = '加载中...';
            handlingSigningList(this.params).then(res => {
                this.list = res.result.records
                this.total = res.result.total
                if (this.list.length == 0) {
                    this.emtypetxt = '暂无数据'
                }
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        reset() {
            this.params = {
                signName: "",
                signNumber: "",
                nameSearchType: "1",//1-按人名搜索 2-按企业搜索
                nameSearchValue: "",
                signState: "",
                tableNum: this.params.tableNum,//1 - 我收到的 2 - 我发起的 3 - 抄送我的 4 - 草稿 5 - 待我操作 6 - 待他人操作 7 - 已完成
                timeSearchEnd: "",
                timeSearchStart: "",
                timeSearchType: "1",//1-按发起时间筛选 2-按完成时间筛选 3-按签订时间筛选时间
                pageNo: 1,
                pageSize: 10
            }
            this.getList()

        },
        // 更改table表头背景色
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f8fa;color: #333;font-weight: 400;'
            }
        },
        handleClick(tab, event) {
            console.log(tab, event);
            let num = Number(tab.index) + 1
            this.params.tableNum = `${num}`
            this.getList()

        },
        // 确定
        onSubmit() {
            console.log('submit!');
        },
        // 直接发起
        direct() {
            this.$router.push({ path: "/initiate" }, () => { })
        },
        handleSizeChange(val) {
            this.params.pagesize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.params.pageNo = val
            this.getList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>

<style lang="scss">
.zdystyle .el-form-item__content .el-input-group {
    margin-top: 5px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
<style lang="scss" scoped>
body {
    background-color: #ffffff;

}

.caozuoitem {
    padding: 5px 10px;
    box-sizing: border-box;
}

.caozuoitem:hover {
    background-color: #e7effe;
    color: #409eff;

}

.itemlable {
    padding: 5px 8px;
    border: 1px solid rgba(0, 0, 0, .1);
    font-size: 16px;
    display: inline-block;
    margin-right: 10px;
    line-height: 16px;
    color: #999;
}

.focus {
    border: 1px solid #409eff;
    color: #409eff;
}
</style>